<template>
    <view class="pages">
        <z-paging ref="paging" :loading-more-enabled="false" :auto-show-back-to-top="true" :to-bottom-loading-more-enabled="false" v-model="viewModel" cell-height-mode="dynamic" @query="getQuery">
            <top-components :cinemaModel="cinemaModel" :options="options"></top-components>
            <search-components :keyword.sync="keyword" :cityModel="cityModel"></search-components>
            <view class="">
                <view class="uls">
                    <view class="lis" @click="cinemaClick(item)" v-for="(item, index) in cinemaList" :key="index">
                        <view class="lis-title">{{ item.cinemaName }}</view>
                        <view class="lis-intro">{{ item.address }}</view>
                    </view>
                </view>
                <u-divider text="END" v-if="cinemaList.length > 0"></u-divider>
                <x-loading :show="cinema_isSync"></x-loading>
            </view>
        </z-paging>
        <x-modal ref="xModal"></x-modal>
        <x-loading :show="isSync"></x-loading>
    </view>
</template>

<script>
import { getCinemas } from '@/sub_pages/movie/common/api/movie.js';

import citysService from '@/sub_pages/movie/citys/service.js';
import service from './service.js';

import xModal from '@/sub_pages/movie/components/x-modal/x-modal.vue';
import xLoading from '@/sub_pages/movie/components/x-loading/x-loading.vue';

import topComponents from './components/top.vue';
import searchComponents from './components/search';
export default {
    components: {
        xModal,
        xLoading,
        topComponents,
        searchComponents,
    },
    data() {
        return {
            options: {},
            citys: [], // 城市列表
            viewModel: [],
            cinemaModel: {},
            cityModel: {}, // 选中城市
            isSync: true,
            keyword: '',
            cinema_isSync: true,
        };
    },
    computed: {
        cinemaList() {
            let list = this.viewModel.filter(r => r.cinemaName.includes(this.keyword));
            return list;
        },
    },
    onLoad(e) {
        this.options = e;
        getApp().globalData.subcontracting_movie.$utils.setNavBarTitle(e.title);
        this.init(e);
    },
    onShow() {
        this.initCity();
    },
    async onReady() {
        if (getApp().globalData.subcontracting_movie.isGps) {
            await service.getLocation(this);
            getApp().globalData.subcontracting_movie.isGps = false;
            this.$refs.paging.reload();
        }
    },
    methods: {
        async init(e) {
            this.citys = await citysService.getCitys();
            this.getDetail();
        },
        initCity() {
            let city = getApp().globalData.subcontracting_movie?.$utils?.getCurrentCity?.();

            if (Object.keys(this.cityModel).length > 0) {
                if (city.cityName !== this.cityModel.cityName) {
                    this.cityModel = city;
                    this.$refs.paging.reload();
                }
            } else {
                this.cityModel = city;
            }
        },
        cinemaClick(e) {
            let url = `/sub_pages/movie/list/list?id=${e.cinemaId}&name=${e.cinemaName}&filmId=${this.options.id}`;
            uni.navigateTo({
                url,
            });
        },
        async getDetail() {
            try {
                const res = await service.getDetail(this);
                this.cinemaModel = res.data || {};
                uni.$u.sleep(500).then(() => {
                    this.isSync = false;
                });
            } catch (e) {
                //TODO handle the exception
                this.isSync = false;
            }
        },

        // 获取数据
        async getQuery(pageNum) {
            this.cinema_isSync = true;

            let para = {
                cityId: this.cityModel.cityId || 3,
                filmId: this.options.id,
                // pageNum,
                // pageSize: 1000,
            };
            let res = await getCinemas(para);
            let data = service.dataListSortFn(res.data || []);
            this.$refs.paging.complete(data);
            this.cinema_isSync = false;
        },
    },
};
</script>

<style lang="scss">
page {
    background-color: #fff;
}
</style>

<style lang="scss" scoped>
.pages {
    .uls {
        background-color: #fff;
        padding: 30rpx;
        .lis {
            padding: 20rpx 0;
            border-bottom: 1rpx solid #eee;
            &-title {
                @include font(32rpx, #333333, bold);
            }
            &-intro {
                margin-top: 10rpx;
                @include font(26rpx, #666);
                @include txtEilLines;
            }
        }
    }
}
</style>
